import ProForm, {
  DrawerForm,
  ProFormDigit,
  ProFormInstance,
  ProFormRadio,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-form';
import { Divider } from 'antd';
import 'dayjs/locale/zh-cn';
import React, { useRef, useState } from 'react';

interface EditTaskGongzhonghaoProps {
  task: PromotionTaskBo.TaskBo;
  onRefurbish: (task: PromotionTaskBo.TaskBo) => void;
}

const EditTaskGongzhonghao: React.FC<EditTaskGongzhonghaoProps> = ({
  task: editTask,
  onRefurbish,
}) => {
  const config = {
    logo: 'assets/promotion_icon_gongzhonghao.png',
    type: 1,
    typeName: '公众号',
  };
  const restFormRef = useRef<ProFormInstance>();

  const [isDemandShareRead, setisDemandShareReadState] = useState<number>(editTask.isDemandShare);

  return (
    <DrawerForm
      key="edit_promotion_task_drawer_form_gongzhonghao"
      formRef={restFormRef}
      title={
        <div
          style={{
            display: 'flex',
          }}
        >
          <img
            width={22.4}
            style={{
              margin: 'auto 2px',
            }}
            src={config.logo}
          />
          编辑任务 - {config.typeName}
        </div>
      }
      drawerProps={{
        maskClosable: false,
        destroyOnClose: true,
      }}
      trigger={<a>编辑</a>}
      onValuesChange={(visible: boolean) => {
        if (!visible) {
          restFormRef.current?.resetFields();
          setisDemandShareReadState(1);
        }
      }}
      initialValues={{
        name: editTask.name,
        route: editTask.route,
        remarks: editTask.remarks,
        isDemandReadTime: editTask.isDemandReadTime,
        isDemandShare: editTask.isDemandShare,
        isDemandShareRead: editTask.isDemandShareRead,
      }}
      onVisibleChange={(values) => {
        if (values.isDemandShare !== undefined) {
          setisDemandShareReadState(values.isDemandShare);
        }
      }}
      onFinish={async (values) => {
        let task = { ...values } as PromotionTaskBo.TaskBo;
        task.id = editTask.id;
        task.type = 1;
        task.typeName = config.typeName;
        task.logo = config.logo;

        onRefurbish(task);
        return true;
      }}
    >
      <ProForm.Group title={'任务内容'}>
        <ProFormText
          width="xl"
          name="name"
          label="标题"
          rules={[{ required: true, message: '请输入标题' }]}
          fieldProps={{
            allowClear: true,
            maxLength: 200,
          }}
        />

        <ProFormTextArea
          width="xl"
          name="route"
          label="链接"
          fieldProps={{
            allowClear: true,
            rows: 3,
            maxLength: 5000,
          }}
          rules={[{ required: true, message: '请输入链接' }]}
        />
      </ProForm.Group>
      <Divider />

      <ProForm.Group title={'任务要求'}>
        <ProFormDigit label="阅读时长（秒）" name="isDemandReadTime" min={1} max={60} />
        <ProFormRadio.Group
          name="isDemandShare"
          label="是否分享"
          options={[
            {
              label: '是',
              value: 1,
            },
            {
              label: '否',
              value: 0,
            },
          ]}
        />
        <ProFormRadio.Group
          name="isDemandShareRead"
          label="分享后是否需要第三方阅读"
          hidden={isDemandShareRead === 0}
          options={[
            {
              label: '是',
              value: 1,
            },
            {
              label: '否',
              value: 0,
            },
          ]}
        />
      </ProForm.Group>
      <Divider />

      <ProForm.Group title={'其他'}>
        <ProFormTextArea
          width="xl"
          name="remarks"
          label="备注"
          fieldProps={{
            allowClear: true,
            rows: 3,
            maxLength: 200,
          }}
        />
      </ProForm.Group>
    </DrawerForm>
  );
};
export default EditTaskGongzhonghao;
